﻿import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import com.example.SerialPort 1.0

import QtQuick.Window 2.15

import "." // 导入项目的根目录

Window {
    id: uartPage
    visible: true
    width: 1200
    height: 768
    title: "UART测试"

    property string selectedPort: ""
    property int selectedBaudRate: 9600
    property bool isConnected: false
    property string sendData: ""
    property int sendDataCount: 0
    property int revDataCount: 0
    property int dataBits: 8
    property int parity: -1
    property int stopBits: 0

    // SerialPort 控制对象
    SerialPort {
        id: serialPort
        onDataReceived: {
            console.log("Received data:", data)
            uartDataDisplay.text += data + '\n'
        }
        onErrorOccurred: {
            errorDisplay.text = error
        }
    }

    function updateTime() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();

        // 确保两位数格式
        month = month < 10 ? "0" + month : "" + month;
        day = day < 10 ? "0" + day : "" + day;
        hour = hour < 10 ? "0" + hour : "" + hour;
        minute = minute < 10 ? "0" + minute : "" + minute;
        second = second < 10 ? "0" + second : "" + second;

        timeDisplay.text = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

        sendCount.text = sendDataCount;
    }

    Timer {
        id:timenow
        interval: 1000 // 设置时间间隔为1000毫秒（1秒）
        repeat: true // 设置定时器重复运行
        onTriggered: {
            updateTime(); // 每次触发时更新时间
        }
    }

    // 主布局，使用 RowLayout 将界面分为左右两部分
    RowLayout {
        id: serialPage
        anchors.fill: parent
        spacing: 20

        // 左侧区域，设置串口选择、波特率选择、连接按钮等
        Rectangle {
            id: uartLeft
            width: parent.width * 0.40
            height: serialPage.height * 0.95
            anchors.left: parent.left
            anchors.leftMargin: 5
            //.left: parent.left
            color: "#f0f0f0"

            // 左侧区域内部分为三个区域（上中下）
            ColumnLayout {
                anchors.fill: parent
                spacing: 5
                anchors.margins: 10

                // 上部区域：串口选择
                Rectangle {
                    id: serialSetop
                    width: uartLeft.width * 0.9
                    height: uartLeft.height * 0.38

                    color: "white"

                    RowLayout {
                        id: serialSelect
                        //anchors.fill: parent
                        anchors.top: serialSetop.top
                        anchors.topMargin: 5
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        spacing: 15

                        Text {
                            id: serialSelectText
                            width: serialSetop.width * 0.2
                            anchors.left: serialSetop.left
                            anchors.leftMargin: 5
                            text: "串口号    :"
                        }

                        ComboBox {
                            id: portComboBox
                            width: serialSetop.width * 0.35
                            anchors.right: serialSetop.right
                            anchors.rightMargin: 5
                            model: serialPort.availablePorts
                            onActivated: {
                                // 获取当前选中的串口号
                                selectedPort = portComboBox.currentText;
                            }
                        }

                    }

                    RowLayout {
                        id: baudRateSelect
                        anchors.top: serialSelect.bottom
                        anchors.topMargin: 5
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        spacing: 15

                        Text {
                            id: baudRateSelectText
                            //Layout.fillWidth: true
                            width: serialSetop.width * 0.2
                            //anchors.centerIn: parent
                            anchors.left: serialSetop.left
                            anchors.leftMargin: 5
                            text: "波特率    :"
                        }

                        ComboBox {
                            id: baudRateComboBox
                            width: serialSetop.width * 0.35
                            anchors.right: serialSetop.right
                            anchors.rightMargin: 5
                            model: [9600, 19200, 38400, 57600, 115200]
                            onActivated: {
                                selectedBaudRate = baudRateComboBox.currentText
                            }
                        }
                    }

                    RowLayout {
                        id: checkBitSelect
                        anchors.top: baudRateSelect.bottom
                        anchors.topMargin: 5
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        spacing: 15

                        Text {
                            id: checkBitSelectText
                            width: serialSetop.width * 0.2
                            anchors.left: serialSetop.left
                            anchors.leftMargin: 5
                            text: "校验位    :"
                        }

                        ComboBox {
                            id: checkBitComboBox
                            width: serialSetop.width * 0.35
                            anchors.right: serialSetop.right
                            anchors.rightMargin: 5
                            model: ["None", "Even", "Odd", "Space", "Mark"]
                            onActivated: {
                                parity = checkBitComboBox.currentIndex
                            }
                        }
                    }

                    // 数据位
                    RowLayout {
                        id: dataBitSelect
                        anchors.top: checkBitSelect.bottom
                        anchors.topMargin: 5
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        spacing: 15

                        Text {
                            id: dataBitSelectText
                            width: serialSetop.width * 0.2
                            anchors.left: serialSetop.left
                            anchors.leftMargin: 5
                            text: "数据位    :"
                        }

                        ComboBox {
                            id: dataBitComboBox
                            width: serialSetop.width * 0.35
                            anchors.right: serialSetop.right
                            anchors.rightMargin: 5
                            model: [8, 7, 6, 5]
                            currentIndex: 0 // 默认选中第一项，即值为8的项
                            onActivated: {
                                dataBits = dataBitComboBox.currentText
                            }
                        }
                    }

                    // 停止位
                    RowLayout {
                        id: stopBitSelect
                        anchors.top: dataBitSelect.bottom
                        anchors.topMargin: 5
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        spacing: 15

                        Text {
                            id: stopBitSelectText
                            width: serialSetop.width * 0.2
                            anchors.left: serialSetop.left
                            anchors.leftMargin: 5
                            text: "停止位    :"
                        }

                        ComboBox {
                            id: stopBitComboBox
                            width: serialSetop.width * 0.35
                            anchors.right: serialSetop.right
                            anchors.rightMargin: 5
                            model: ["0", "1", "1.5", "2"]
                            onActivated: {
                                selectedBaudRate = stopBitComboBox.currentText
                            }
                        }
                    }

                    // 链接按钮
                    RowLayout {
                        id: linkButtonRow
                        anchors.top: stopBitSelect.bottom
                        anchors.topMargin: 5
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        spacing: 15

                        Button {
                            id: linkButton
                            width: serialSetop.width * 0.25
                            height: 30 // 设置按钮高度
                            text: "断开"
                            onClicked: {
                                // 连接串口
                                 isConnected = serialPort.connectToPort(selectedPort, selectedBaudRate, dataBits, parity, stopBits)
                                // 这里添加连接逻辑
                                if (isConnected) {
                                    linkButton.text = "连接";
                                    statusIndicator.color = "green"; // 连接成功，显示绿色
                                    errorDisplay.text = "port is waiting for work......"
                                } else {
                                    linkButton.text = "断开";
                                    statusIndicator.color = "red"; // 断开连接，显示红色
                                    errorDisplay.text = "port is working......"
                                }
                            }
                        }

                        // 连接状态显示框
                        Rectangle {
                            id: statusIndicator
                            width: 30 // 设置圆形宽度
                            height: width // 高度与宽度相同，形成圆形
                            radius: width / 2 // 设置半径为宽度的一半
                            color: "red" // 默认颜色为红色
                            anchors.left: linkButton.right
                            anchors.leftMargin: 5
                            anchors.top: linkButton.top
                            anchors.topMargin: 5
                        }
                    }


                }

                // 中部区域：发送数据格式设置
                Rectangle {
                    id: serialrecevice
                    anchors.top: serialSetop.bottom
                    anchors.topMargin: uartLeft.height * 0.02

                    width: uartLeft.width * 0.9
                    height: uartLeft.height * 0.30
                    color: "white"

                    ColumnLayout {
                        id: receiverSetup

                        // 选择数据格式
                        Rectangle {
                            id: selectFormat
                            width: serialrecevice.width
                            height: serialrecevice.height * 0.2

                            RowLayout {
                                //anchors.fill: parent
                                spacing: serialrecevice.width * 0.2

                                /*
                                Text {
                                    anchors.centerIn: parent
                                    text: "接收设置："
                                    font.bold: true
                                }*/

                                // 使用 RadioButton
                                RadioButton {
                                    id: receiverhexascii
                                    text: "ASCII"
                                    width: 20
                                    height: 20
                                    checked: true
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("接收设置： ASCII")
                                        }
                                    }
                                }


                                RadioButton {
                                    id: receiverhex
                                    text: "HEX"
                                    width: 20
                                    height: 20
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("接收设置： HEX")
                                        }
                                    }
                                }
                            }
                        }

                        Rectangle {
                            id: receiverFormat
                            width: selectFormat.width
                            anchors.top: selectFormat.bottom
                            anchors.topMargin: 10
                            //height: uartLeft.height * 0.25
                            //color: "white"

                            // 使用 ColumnLayout 来竖直排列 CheckBox 按钮
                            ColumnLayout {
                                anchors.fill: parent
                                spacing: 5  // 设置各项之间的间距

                                // 第一个选项
                                CheckBox {
                                    text: "按日志模式选择"
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("选中了选项 按日志模式选择")
                                        } else {
                                            console.log("取消选中选项 按日志模式选择")
                                        }
                                    }
                                }

                                // 第二个选项
                                CheckBox {
                                    text: "接收区自动换行"
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("选中了选项 接收区自动换行")
                                        } else {
                                            console.log("取消选中选项 接收区自动换行")
                                        }
                                    }
                                }

                                // 第三个选项
                                CheckBox {
                                    text: "接收保存到文件存储区"
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("接收保存到文件存储区")
                                        } else {
                                            console.log("接收保存到文件存储区")
                                        }
                                    }
                                }
                            }
                        }

                    }
                }


                // 下部区域：连接按钮
                Rectangle {
                    id: sendFormatSetup
                    anchors.top:serialrecevice.bottom
                    anchors.topMargin: uartLeft.height * 0.02

                    width: uartLeft.width * 0.9
                    height: uartLeft.height * 0.25
                    color: "white"

                    ColumnLayout {
                        id: sendSetup

                        // 选择数据格式
                        Rectangle {
                            id: selectSendFormat
                            width: sendFormatSetup.width
                            height: sendFormatSetup.height * 0.2

                            RowLayout {
                                //anchors.fill: parent
                                spacing: sendFormatSetup.width * 0.2

                                /*
                                Text {
                                    anchors.centerIn: parent
                                    text: "接收设置："
                                    font.bold: true
                                }*/

                                // 使用 RadioButton
                                RadioButton {
                                    id: sendhexascii
                                    text: "ASCII"
                                    width: 20
                                    height: 20
                                    checked: true
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("接收设置： ASCII")
                                        }
                                    }
                                }


                                RadioButton {
                                    id: sendhex
                                    text: "HEX"
                                    width: 20
                                    height: 20
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("接收设置： HEX")
                                        }
                                    }
                                }
                            }
                        }

                        Rectangle {
                            id: sendFormat
                            width: selectSendFormat.width
                            anchors.top: selectSendFormat.bottom
                            anchors.topMargin: 10
                            //height: uartLeft.height * 0.25
                            //color: "white"

                            // 使用 ColumnLayout 来竖直排列 CheckBox 按钮
                            ColumnLayout {
                                anchors.fill: parent
                                spacing: 5  // 设置各项之间的间距

                                // 第一个选项
                                CheckBox {
                                    text: "按日志模式选择"
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("选中了选项 按日志模式选择")
                                        } else {
                                            console.log("取消选中选项 按日志模式选择")
                                        }
                                    }
                                }

                                // 第二个选项
                                CheckBox {
                                    text: "接收区自动换行"
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("选中了选项 接收区自动换行")
                                        } else {
                                            console.log("取消选中选项 接收区自动换行")
                                        }
                                    }
                                }

                                // 第三个选项
                                CheckBox {
                                    text: "接收保存到文件存储区"
                                    onCheckedChanged: {
                                        if (checked) {
                                            console.log("接收保存到文件存储区")
                                        } else {
                                            console.log("接收保存到文件存储区")
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }

        // 右侧区域，设置数据发送、接收以及错误信息显示
        Rectangle {
            id: serialDisplay
            width : serialPage.width  * 0.56
            height: serialPage.height * 0.95
            anchors.right: serialPage.right
            anchors.rightMargin: 10
            color: "#f0f0f0"


            ColumnLayout {
                id: dataReceice
                spacing: 10

                Rectangle{
                    id:dataRecevice
                    width: serialDisplay.width
                    height: serialDisplay.height * 0.6

                    Rectangle {
                        id:  dataReceviceSetup
                        width: parent.width * 1  // 设置宽度为父容器的 90%
                        height: parent.height * 0.05

                        Label {
                            id:  dataReceviceLabel
                            text: "接收数据"
                        }

                        // 20241230 zd 暂时取消推出按钮，退出点击右上方"X"按钮
                        Button {
                            id: exitbutton0
                            text: "返 回"
                            anchors.top: dataReceviceSetup.top
                            //anchors.topMargin: 5
                            anchors.right: dataReceviceSetup.right
                            width: parent.width * 0.20  // 设置宽度为父容器的 90%
                            height: parent.height * 0.95
                            onClicked: {
                                console.log("UART 返回主界面")
                                uartPage.visible = false
                                mainPage.visible = true
                            }
                        }
                    }


                    // 接收数据显示
                    Rectangle {
                        id: serialDisplayArea
                        width: parent.width * 1
                        height: parent.height * 0.9
                        color: "#f0f0f0"
                        border.color: "#c0c0c0"
                        border.width: 2
                        //radius: 10
                        anchors.top: dataReceviceSetup.bottom
                        anchors.topMargin: 5

                        // 滚动条
                        ScrollView {
                            anchors.fill: parent
                            clip: true

                            TextArea {
                                id: uartDataDisplay
                                anchors.fill: parent
                                readOnly: true
                                placeholderText: "接收到的数据"
                                color: "black"
                                background: Rectangle {
                                    color: "transparent"
                                }
                                wrapMode: TextArea.Wrap
                                font.pixelSize: 14
                            }
                        }
                    }
                }

                Rectangle {
                    id: datatoSend
                    anchors.top: dataRecevice.bottom
                    //anchors.topMargin: 10
                    width: serialDisplay.width
                    height: serialDisplay.height * 0.4


                    RowLayout{
                        id: sendDataArea
                        spacing: 10

                        // 发送数据显示
                        Rectangle {
                            id: sendserialDisplayArea
                            width: serialDisplay.width * 0.60
                            height: serialDisplay.height * 0.40
                            color: "#f0f0f0"
                            border.color: "#c0c0c0"
                            border.width: 2
                            //radius: 10
                            anchors.top: datatoSend.top
                            //anchors.topMargin: 5

                            // 包含一个文本框来显示接收到的数据
                            TextArea {
                                id: sendDataDisplay
                                width: parent.width * 0.95
                                height: parent.height * 0.95
                                anchors.centerIn: parent
                                //readOnly: true
                                text: "hello world"
                                color: "black"
                                background: Rectangle {
                                    color: "transparent"
                                }
                                wrapMode: TextArea.Wrap
                                font.pixelSize: 14
                            }
                        }

                        Rectangle {
                            id: sendserialbuttons
                            width: serialDisplay.width * 0.40
                            height: serialDisplay.height * 0.40
                            color: "#f0f0f0"
                            border.color: "#c0c0c0"
                            border.width: 2
                            //radius: 10
                            anchors.top: sendserialDisplayArea.top
                            anchors.left: sendserialDisplayArea.right

                            Button {
                                id: sendDatabutton
                                text: "发 送"
                                anchors.top: sendserialbuttons.top
                                anchors.topMargin: 20
                                anchors.left: sendserialbuttons.left
                                anchors.leftMargin: 20

                                onClicked: {
                                    serialPort.sendData(sendDataDisplay.text)
                                    //dataToSendText.text = ""
                                    sendDataCount = sendDataCount + 1
                                }
                            }

                            Button {
                                id: clearDatabutton
                                text: "清 除"
                                anchors.top: sendDatabutton.bottom
                                anchors.topMargin: 10
                                anchors.left: sendserialbuttons.left
                                anchors.leftMargin: 20

                                onClicked: {
                                    sendDataDisplay.text = ""
                                }
                            }
                        }
                    }
                }
            }

        }

        Rectangle {
            id: helpInfoDispaly
            anchors.top: uartLeft.bottom
            anchors.topMargin: 10
            anchors.left: uartLeft.left

            RowLayout {
                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                spacing: 20

                Text {
                    id: errorDisplay
                    color: "red"
                    text: "port is waiting for work......"
                }

                Text {
                    color: "black"
                    text: "发送:"
                }

                Text {
                    id: sendCount
                    color: "black"
                    text: "0"
                }

                Text {
                    color: "black"
                    text: "接收:"
                }

                Text {
                    id: receiverCount
                    color: "black"
                    text: "0"
                }

                Text {
                    id: timeDisplay
                    color: "black"
                    text: ""
                }

                Component.onCompleted: {
                    timenow.start();
                }
            }
        }
    }
}
